<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{title}}</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <style>
        body {
            background-image:url(../img/register3.jpg);
            background-size:100%;
            background-repeat: no-repeat;
            opacity:0.8;
        }
        .container {
            background-color: rgba(30,149,150,0.3);
            z-index:2;
            padding:100px 0;
            width:600px;
            position:relative;
        }
        .container-top {
            position:absolute;
            left:50%;
            margin-left:-50px;
            top:50px;
            width:100px;
            height:5px;
            border-radius: 5px;
            background-color: #fff;
        }
        .container .row form {
            z-index:3;
        }
        .glyphicon {
            position:relative;
            top:0;
        }
    </style>
</head>
<body style="padding-top:60px">

<div class="container">
    <div class="container-top"></div>
    <form class="col-md-8 col-md-offset-2" action="/signin"  method="POST">
        <!--用户名-->
        <div class="form-group input-group">
            <span class="input-group-addon glyphicon glyphicon-user"></span>
            <input type="text" class="form-control" name="petname" placeholder="请输入昵称" pattern="^[a-zA-z]{6,12}$" required>
        </div>
        <!--密码-->
        <div class="form-group input-group">
            <span class="input-group-addon glyphicon glyphicon-lock"></span>
            <input type="password" class="form-control" name="password"  placeholder="请输入密码" pattern="^.{6,12}$" required>
        </div>
        <!--提交按钮-->
        <input type="submit" value="登录" style="margin-top:20px" class="btn btn-default btn-success btn-block">
    </form>
</div>
<!--模态框-->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog  modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">用户提示</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/jquery-2.2.4.js"></script>
<script src="js/bootstrap.js"></script>
<script src="scripts/signin.js"></script>